<script setup>
import { ref } from "vue";
const active = ref("");
const footerList = ref([
  {
    text: "首页",
    to: "/index",
    icon: "home-o",
  },
  {
    text: "分类",
    to: "/goods_cate",
    icon: "apps-o",
  },
  {
    text: "购物车",
    to: "/shopCart",
    icon: "cart-o",
  },
  {
    text: "我的",
    to: "/my",
    icon: "manager-o",
  },
]);
</script>
<!-- <van-tabbar-item icon="home-o" to="/admin">首页</van-tabbar-item>
<van-tabbar-item icon="search" to="/list">订单</van-tabbar-item>
<van-tabbar-item icon="friends-o" to="/customer">客服</van-tabbar-item>
<van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item> -->
<template>
  <div class="app">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <van-tabbar route active-color="#E93323" inactive-color="#000">
        <van-tabbar-item
          replace
          v-for="(v, i) in footerList"
          :key="i"
          :to="v.to"
          :icon="v.icon"
          >{{ v.text }}</van-tabbar-item
        >
      </van-tabbar>
    </footer>
  </div>
</template>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  footer {
    width: 100%;
    height: 1.3333rem;
  }
  main {
    flex: 1;
    overflow: auto;
  }
}
</style>
